<template>
	<div>
		<div style="height: 20px;display:flex;align-items: center;">
			<span style="height: 20px;line-height: 20px;font-size: 20px;margin-bottom: 20px;">新增员工信息</span>
		</div>
		<el-form label-position="left" label-width="100px" ref="tableData" :model="tableData">
			<el-form-item label="员工账号">
				<el-input v-model="tableData.staffId"></el-input>
			</el-form-item>
			<el-form-item label="员工密码">
				<el-input type="password" v-model="tableData.staffPassword"></el-input>
			</el-form-item>
			<el-form-item label="员工头像:" label-width="100px" prop="imageUrl">
				<el-input v-model="tableData.imageUrl" v-if="false"></el-input>
				<el-upload class="upload-demo" ref="upload" drag
					action="http://localhost:8888/images/uploadStaffsImages" multiple :limit="4" :auto-upload="true"
					:on-success="handleAvatarSuccess" list-type="picture">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						将图片拖到此处，或<em>点击上传</em>
					</div>
				</el-upload>
			</el-form-item>
			<el-form-item label="员工姓名">
				<el-input v-model="tableData.staffName"></el-input>
			</el-form-item>
			<el-form-item label="员工手机号">
				<el-input v-model="tableData.staffPhone"></el-input>
			</el-form-item>
			<el-form-item label="员工性别">
				<el-input v-model="tableData.staffGender"></el-input>
			</el-form-item>
			<el-form-item label="员工出生日期">
				<el-col>
					<el-date-picker type="date" placeholder="选择日期" v-model="tableData.staffBirthdate" value-format="yyyy-MM-dd"
						style="width: 200px;"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="员工入职时间">
				<el-col>
					<el-date-picker type="date" placeholder="选择日期" v-model="tableData.staffCreatetime" value-format="yyyy-MM-dd"
						style="width: 200px;"></el-date-picker>
				</el-col>
			</el-form-item>

		</el-form>
		<el-button type="primary" @click.prevent="submitForm('tableData');addStaffs('tableData')">提交</el-button>
		<el-button @click="resetForm('tableData')">重置</el-button>
		</el-form-item>
	</div>
</template>

<script>
	import request from '@/utils/axios/request.js'
	export default {
		data() {
			return {
				tableData: {
					staffId:'',
					staffPassword:'',
					staffName:'',
					staffPhone:'',
					staffBirthdate:'',
					staffGender:'',
					imageUrl:'',
					staffCreatetime:''

				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('请确认提交');
						//console.log(this.tableData)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//图片回显
			handleAvatarSuccess(res, file) {
				console.log(res);
				console.log(file)
				this.tableData.imageUrl = res.data;
			},
			addStaffs: function() {
				// let formData = JSON.stringify(this.tableData)
				// console.log(formData)
				request({
					method: 'post',
					url: '/staffs/addStaffs',
					data: this.tableData
				}).then((res) => {
					if (res.data.code == 100) {
						alert("提交成功")
						tthis.$options.methods.resetForm();
					}
					// var jsonObj = JSON.parse(JSON.stringify(res.data.data[0]));
					// console.log(this.tableData)
					// console.log("提交成功")
					// console.log(res)

				})
			}
		}
	}
</script>

<style scoped>
	.el-form-item {
		width: 40%;
		margin-left: 30%;
		margin-right: 30%;
	}
</style>